import BaseComponent from "components/Base/BaseComponent";
import {connect} from "dva";
import DataSet from "@antv/data-set";

import {Axis, Chart, Coord, Geom, Legend, Tooltip} from "bizcharts";
import {log} from "utils/index";

@connect(({deviceStatistics}) => ({deviceStatistics}))
export default class extends BaseComponent {

  getNamespace() {
    return "deviceStatistics";
  }

  render() {

    const {deviceStatisticData} = this.getModel(this.getNamespace());

    const ds = new DataSet();
    const dv = ds.createView().source(deviceStatisticData);
    dv.transform({
      type: "fold",
      // 展开字段集
      fields: ["使用", "空闲"],
      // key字段
      key: "设备状态",
      // value字段
      value: "设备数量",
      retains: ["Device"] // 保留字段集，默认为除fields以外的所有字段
    });

    return (
      <Chart height={400} data={dv} forceFit>
        <Legend/>
        <Coord transpose/>
        <Axis
          name="Device"
          label={{
            offset: 12
          }}
        />
        <Axis name="设备数量"/>
        <Tooltip/>
        <Geom
          type="intervalStack"
          position="Device*设备数量"
          color={['设备状态', ['#1994FF', '#bbbbbb']]}
        >
        </Geom>
      </Chart>
    );
  }
}
